分享人:杨纲
目录
1.什么是DOM
2.DOM节点
3.常见的DOM属性
4.访问元素的方法
5.修改元素的方法
6.DOM事件
7.参考文献
8.更多讨论
DOM 是 Document Object Model(文档对象模型)的缩写。
DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在 HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。
什么是节点HTML 文档中的所有内容都是节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
demo属性是节点(HTML 元素)的值,您能够获取或设置。
nodeName 属性
nodeName 属性规定节点的名称
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
4.访问元素的方法
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法
改变 HTML 内容
document.getElementById("p1").innerHTML="New text!";
改变 CSS 样式
document.getElementById("p2").style.color="blue";
改html和css追加子元素的方法
首先必须创建该元素(元素节点),然后把它追加到已有的元素上。var para=document.createElement("p");
创建新的 HTML 元素 - appendChild() 在父元素的最后追加
创建新的 HTML 元素-element.insertBefore(para,child);在指定位置给父级追加子元素
删除 HTML 元素,您必须清楚该元素的父元素:parent.removeChild(child);
替换 HTML 元素:parent.replaceChild(para,child); 方法
实例
var element=document.getElementById("d1");
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
element.appendChild(para);
允许 JavaScript 对 HTML 事件作出反应
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
感谢大家观看
BY : 陈尚欢 | 韩阳| 杨纲